<template>
	<view class="container">
		<!-- 电子存根卡片 -->
		<view class="stub-card">
			<!-- 存根头部 -->
			<view class="stub-header">
				<view class="header-main">
					<text class="stub-title">电子存根</text>
					<view class="stub-status">
						<text class="status-text">{{ stubInfo.status_text }}</text>
					</view>
				</view>
				<view class="header-meta">
					<text class="stub-no">单号: {{ stubInfo.express_no }}</text>
				</view>
			</view>

			<!-- 寄收件人信息 -->
			<view class="address-section">
				<view class="address-row">
					<view class="address-item sender">
						<view class="address-icon">
							<text class="icon-ji">寄</text>
						</view>
						<view class="address-content">
							<view class="address-content-top">
								<text class="address-name">{{ stubInfo.send_name }}</text>
								<text class="address-phone">{{ stubInfo.send_phone }}</text>
							</view>
							<text class="address-detail">{{ stubInfo.full_send_address }}</text>
						</view>
					</view>

					<view class="address-item receiver">
						<view class="address-icon">
							<text class="icon-shou">收</text>
						</view>
						<view class="address-content">
							<view class="address-content-top">
								<text class="address-name">{{ stubInfo.receipt_name }}</text>
								<text class="address-phone">{{ stubInfo.receipt_phone }}</text>
							</view>
							<text class="address-detail">{{ stubInfo.full_receipt_address }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 运单信息 -->
			<view class="waybill-section">
				<view class="section-header">
					<text class="section-title">运单信息</text>
				</view>
				<view class="waybill-grid">
					<view class="grid-item">
						<text class="grid-label">货物名称</text>
						<text class="grid-value">{{ stubInfo.goods_name }}</text>
					</view>
					<view class="grid-item">
						<text class="grid-label">货物数量</text>
						<text class="grid-value">{{ stubInfo.goodsQuantity || 1 }}</text>
					</view>
					<view class="grid-item">
						<text class="grid-label">货物重量</text>
						<text class="grid-value">{{ stubInfo.weight }}</text>
					</view>
				</view>
			</view>

			<view class="waybill-section">
				<view class="section-header">
					<text class="section-title">物流信息</text>
				</view>
				<view class="waybill-grid">
					<view class="grid-item">
						<text class="grid-label">物流公司</text>
						<text class="grid-value">{{ stubInfo.express_name }}</text>
					</view>
					<view class="grid-item">
						<text class="grid-label">快递单号</text>
						<text class="grid-value">{{ stubInfo.express_no }}</text>
					</view>
					<view class="grid-item">
						<text class="grid-label">寄件时间</text>
						<text class="grid-value">{{ stubInfo.create_time }}</text>
					</view>
					<view class="grid-item" v-if="stubInfo.sign_time">
						<text class="grid-label">签收时间</text>
						<text class="grid-value">{{ stubInfo.sign_time }}</text>
					</view>
				</view>
			</view>

			<!-- 费用信息 -->
			<!-- <view class="fee-section">
				<view class="section-header">
					<text class="section-title">费用明细</text>
				</view>
				<view class="fee-list">
					<view class="fee-item">
						<text class="fee-label">运费</text>
						<text class="fee-value">{{ stubInfo.freight }}</text>
					</view>
					<view class="fee-item">
						<text class="fee-label">保价费</text>
						<text class="fee-value">{{ stubInfo.insuranceFee }}</text>
					</view>
					<view class="fee-item">
						<text class="fee-label">包装费</text>
						<text class="fee-value">{{ stubInfo.packingFee }}</text>
					</view>
					<view class="fee-item">
						<text class="fee-label">其他费用</text>
						<text class="fee-value">{{ stubInfo.otherFee }}</text>
					</view>
					<view class="fee-divider"></view>
					<view class="fee-total">
						<text class="total-label">总计</text>
						<text class="total-value">{{ stubInfo.totalAmount }}</text>
					</view>
				</view>
			</view> -->

			<!-- 存根底部 -->
			<view class="stub-footer">
				<view class="footer-content">
					<text class="footer-text">此电子存根与纸质存根具有同等效力</text>
					<text class="footer-time">生成时间: {{ stubInfo.create_time }}</text>
				</view>
				<view class="stub-stamp">
					<text class="stamp-text">电子签章</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				stubInfo: {}
			};
		},
		onLoad(option) {
			// 如果有传递存根ID，则获取存根详情
			if (option.id) {
				this.getStubDetail(option.id);
			}
		},
		methods: {
			getStubDetail(id) {
				uni.$uv.http.post('/wanlshop.express/getExpressDetail', {
					order_id: id
				}).then(res => {
					let data = res.res.data;
					this.stubInfo = data;
				}).catch(error => {
					this.$wanlshop.msg('获取失败，请稍后重试', 2000, true)
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
		display: flex;
		flex-direction: column;
	}

	.stub-card {
		background: #ffffff;
		box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.08);
		overflow: hidden;
		flex: 1;
		margin-bottom: 30rpx;
	}

	.stub-header {
		background: linear-gradient(135deg, #fe6600 0%, #ff8936 100%);
		padding: 32rpx;
		color: #ffffff;

		.header-main {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;

			.stub-title {
				font-size: 40rpx;
				font-weight: 700;
			}

			.stub-status {
				background: rgba(255, 255, 255, 0.2);
				padding: 8rpx 20rpx;
				border-radius: 20rpx;

				.status-text {
					font-size: 24rpx;
				}
			}
		}

		.header-meta {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.stub-no {
				font-size: 24rpx;
				opacity: 0.9;
			}

			.stub-date {
				font-size: 24rpx;
				opacity: 0.9;
			}
		}
	}

	.address-section {
		padding: 20rpx 32rpx;
		border-bottom: 1rpx solid #f0f0f0;

		.address-row {
			display: flex;
			flex-direction: column;
		}

		.address-item {
			flex: 1;
			display: flex;

			&.sender {
				margin: 20rpx 0;
			}

			&.receiver {
				margin: 20rpx 0;
			}

			.address-icon {
				width: 80rpx;
				display: flex;
				justify-content: center;
				align-items: flex-start;
				padding-top: 8rpx;
				color: #ffffff;
				font-size: 26rpx;

				text {
					padding: 8rpx 10rpx;
					border-radius: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.icon-ji {
					background: #1B1B1B;
				}

				.icon-shou {
					background: #CA3446;
				}
			}

			.address-content {
				display: flex;
				flex-direction: column;
				padding-left: 20rpx;

				.address-content-top {
					display: flex;
					align-items: center;
				}

				.address-type {
					font-size: 24rpx;
					color: #999;
					margin-bottom: 12rpx;
				}

				.address-name {
					font-size: 30rpx;
					font-weight: 600;
					color: #333;
					margin-bottom: 8rpx;
				}

				.address-phone {
					font-size: 26rpx;
					color: #666;
					margin-bottom: 12rpx;
					padding-left: 20rpx;
				}

				.address-detail {
					font-size: 26rpx;
					color: #666;
					line-height: 1.4;
				}
			}
		}
	}

	.waybill-section {
		padding: 32rpx;
		border-bottom: 1rpx solid #f0f0f0;

		.section-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 24rpx;

			.section-title {
				font-size: 30rpx;
				font-weight: 600;
				color: #333;
			}
		}

		.waybill-grid {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 20rpx;

			.grid-item {
				display: flex;
				flex-direction: column;
				padding: 10rpx 0;

				.grid-label {
					font-size: 24rpx;
					color: #999;
					margin-bottom: 8rpx;
				}

				.grid-value {
					font-size: 28rpx;
					color: #333;
					font-weight: 500;
				}
			}
		}
	}

	.fee-section {
		padding: 32rpx;

		.section-header {
			margin-bottom: 24rpx;

			.section-title {
				font-size: 30rpx;
				font-weight: 600;
				color: #333;
			}
		}

		.fee-list {
			.fee-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 16rpx 0;

				.fee-label {
					font-size: 28rpx;
					color: #666;
				}

				.fee-value {
					font-size: 28rpx;
					color: #333;
					font-weight: 500;
				}
			}

			.fee-divider {
				height: 1rpx;
				background: #e8e8e8;
				margin: 16rpx 0;
			}

			.fee-total {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 0 0;

				.total-label {
					font-size: 30rpx;
					font-weight: 600;
					color: #333;
				}

				.total-value {
					font-size: 36rpx;
					color: #fe6600;
					font-weight: 700;
				}
			}
		}
	}

	.stub-footer {
		background: #f8f9fa;
		padding: 24rpx 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.footer-content {
			display: flex;
			flex-direction: column;

			.footer-text {
				font-size: 22rpx;
				color: #999;
				margin-bottom: 8rpx;
			}

			.footer-time {
				font-size: 22rpx;
				color: #999;
			}
		}

		.stub-stamp {
			width: 120rpx;
			height: 120rpx;
			border: 2rpx dashed #fe6600;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			transform: rotate(-15deg);

			.stamp-text {
				font-size: 20rpx;
				color: #fe6600;
				font-weight: 500;
			}
		}
	}
</style>